<script setup lang="ts">
import { UserFilled, Promotion, Share, Plus } from '@element-plus/icons-vue';
import { ENodeType, AddNodeType, EConditionMode, EExamineMode, ETermMode } from '../types';

const model = defineModel<AddNodeType>();

function addType(type: ENodeType) {
	switch (type) {
		case ENodeType.APPROVER: {
			model.value = {
				nodeName: '审核人',
				type,
				setType: 1,
				examineLevel: 1,
				examineMode: EExamineMode.ORDER,
				termAuto: false,
				term: 0,
				termMode: ETermMode.REJECT,
				nodeUserList: [],
				directorMode: 0,
				directorLevel: 1,
				childNode: model.value,
			};
			break;
		}
		case ENodeType.SEND: {
			model.value = {
				nodeName: '抄送人',
				type,
				userSelectFlag: true,
				nodeUserList: [],
				childNode: model.value,
			};
			break;
		}
		case ENodeType.BRANCH: {
			model.value = {
				nodeName: '条件路由',
				type,
				conditionNodes: [
					{
						nodeName: '条件1',
						type: ENodeType.CONDITION,
						priorityLevel: 1,
						conditionMode: EConditionMode.AND,
						conditionList: [],
					},
					{
						nodeName: '条件2',
						type: ENodeType.CONDITION,
						priorityLevel: 2,
						conditionMode: EConditionMode.AND,
						conditionList: [],
					},
				],
				childNode: model.value,
			};
			break;
		}
	}
}
</script>

<template>
	<div class="add-node-btn-box">
		<div class="add-node-btn">
			<el-popover placement="right-start" :width="270" trigger="click" :hide-after="0" :show-after="0">
				<template #reference>
					<el-button type="primary" :icon="Plus" circle></el-button>
				</template>
				<div class="add-node-popover-body">
					<ul>
						<li>
							<el-icon style="color: #ff943e" @click="addType(ENodeType.APPROVER)">
								<UserFilled />
							</el-icon>
							<p>审批节点</p>
						</li>
						<li>
							<el-icon style="color: #3296fa" @click="addType(ENodeType.SEND)">
								<Promotion />
							</el-icon>
							<p>抄送节点</p>
						</li>
						<li>
							<el-icon style="color: #15bc83" @click="addType(ENodeType.BRANCH)">
								<Share />
							</el-icon>
							<p>条件分支</p>
						</li>
					</ul>
				</div>
			</el-popover>
		</div>
	</div>
</template>
